<script lang="ts" setup>
import { useRoute } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import { requestSongListHotCom } from "../../utils/axiosURL"
import defaultImg from '../../assets/logo.png'

const router = useRoute()
// 歌单ID
const songListID = ref<any>(router.query.id)
// 存储热门评论
let saveHotCommentData = reactive<any>([])
// 页码
const pageNumber = ref<number>(1)
// 热评总数
const hotCommentTotal = ref<any>(0)
// 滚动条滑动到底部时骨架屏显示状态
let scrollBtmSkeletonState = ref<boolean>(true)
// 滚动条所在位置
let scrollTopPosition = ref<number>(0)
// 获取热评列表组件实例
const commentItemExample = ref<any>(null)

// 热评请求
const requestSongListHotComFn = () => {
  scrollBtmSkeletonState.value = false
  requestSongListHotCom(songListID.value, pageNumber.value, 2).then((data: any) => {
    saveHotCommentData = [...saveHotCommentData, ...data.hotComments]
    hotCommentTotal.value = data.total
    scrollBtmSkeletonState.value = true
  }).catch(err => {
    console.log(err)
  })
}

const hotCommentListScroll = () => {
  let scrollTop = commentItemExample.value.scrollTop; //滚动条距离容器顶部距离
  let windowHeight = commentItemExample.value.clientHeight; // 容器整个高度
  let scrollHeight = commentItemExample.value.scrollHeight; // 被卷曲的距离
  let total = scrollTop + windowHeight
  if (Math.ceil(total) + 1 >= scrollHeight) {
    scrollTopPosition.value = scrollTop
    if (saveHotCommentData.length >= hotCommentTotal.value) return
    pageNumber.value++
    requestSongListHotComFn()
  }
}

// 注册局部自定义指令
const vLazy = {
  mounted(el: HTMLImageElement, binding: any) {
    // el表示使用指令的DOM元素
    // bindings表示指令相关的信息是一个对象 如v-lazy="xxx",bindling即是xxx对应的内容
    // 指令的功能：实现图片的懒加载
    // 1、监听图片是否进入可视区
    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
      // true；进入可视区域，false：未进入可视区域
      if (isIntersecting) {
        // 1、给图片的src属性赋值图片的地址
        el.src = binding.value
        // 2、取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
        observer.unobserve(el)
        // 3、加载的图片失败了，显示默认的图片地址
        el.onerror = () => {
          el.src = defaultImg
        }
      }
    }, {
      threshold: 0
    })
    observer.observe(el)
  },
};


onMounted(() => {
  requestSongListHotComFn()
})
</script>

<template>
  <div class="allHotComment">
    <p class="title">精彩评论</p>
    <ul v-if="saveHotCommentData && scrollBtmSkeletonState" @scroll="hotCommentListScroll" ref="commentItemExample">
      <li v-for="(item, index) in saveHotCommentData">
        <div class="headPicture">
          <img v-lazy="`${item.user.avatarUrl}`">
        </div>
        <div class="textWrap">
          <p class="userAndText">
            <span class="user">
              {{ item.user.nickname }}---{{ index }}
              <span v-if="item.user.vipType === 1" class="iconfont icon-VIP-1"></span>
              <span v-if="item.user.vipType === 2" class="iconfont icon-VIP-02"></span>
              <span v-if="item.user.vipType === 3" class="iconfont icon-VIP-03"></span>
              <span v-if="item.user.vipType === 4" class="iconfont icon-VIP-04"></span>
              <span v-if="item.user.vipType === 5" class="iconfont icon-VIP-"></span>
              <span v-if="item.user.vipType === 6" class="iconfont icon-VIP-06"></span>
              <span v-if="item.user.vipType === 7" class="iconfont icon-VIP-07"></span>
              <span v-if="item.user.vipType === 8" class="iconfont icon-VIP-08"></span>
              <span v-if="item.user.vipType === 9" class="iconfont icon-VIP-09"></span>
              <span v-if="item.user.vipType === 10" class="iconfont icon-VIP-10"></span>
              <span v-if="item.user.vipType === 11" class="iconfont icon-VIP-11"></span>
              :
            </span>
            <span class="text">{{ item.content }}</span>
          </p>
          <p class="childCommon" v-if="item.beReplied.length">
            <span class="childUser">{{ item.beReplied[0].user.nickname }}: </span>
            <span class="childContent">{{ item.beReplied[0].content }}</span>
          </p>
          <div class="timeAndMore">
            <span>{{ item.timeStr }} {{ item.time }}</span>
            <div class="mores">
              <p><span class="iconfont icon-dianzan"></span>{{ item.likedCount }}</p>
              <p class="iconfont icon-fenxiang"></p>
              <p class="iconfont icon-kuaisuhuifu"></p>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div v-else class="skeleton">
      <commentItemSkeleton v-for="i in 7" />
    </div>
  </div>
</template>



<style lang="scss" scoped>
.allHotComment {
  width: 100%;
  height: 93%;
  padding-bottom: 40px;
  box-sizing: border-box;

  .title {
    font-size: $font-size-lg;
    font-family: $activeTextFont;
    margin-left: 30px;
    margin-top: 20px;
  }

  ul {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-left: 30px;
    box-sizing: border-box;

    li {
      display: flex;
      width: 100%;
      min-height: 80px;
      padding: 15px 30px 15px 0;

      box-sizing: border-box;

      .headPicture {
        flex-basis: 50px;

        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }

      .textWrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 10px;

        p {
          font-size: $font-size-xs;
          color: $font_second_color;
        }

        .userAndText {
          line-height: 18px;

          .user {
            color: rgb(80, 125, 175);

            span {
              vertical-align: -2px;
            }

            .icon-VIP-1 {
              color: rgb(253, 237, 212)
            }

            .icon-VIP-02 {
              color: rgb(158, 196, 246)
            }

            .icon-VIP-03 {
              color: rgb(240, 76, 124)
            }

            .icon-VIP-04 {
              color: rgb(216, 99, 242)
            }

            .icon-VIP- {
              color: rgb(76, 180, 231)
            }

            .icon-VIP-06 {
              color: rgb(252, 193, 45)
            }

            .icon-VIP-07 {
              color: rgb(243, 166, 148)
            }

            .icon-VIP-08 {
              color: rgb(220, 199, 225)
            }

            .icon-VIP-09 {
              color: rgb(221, 187, 153)
            }

            .icon-VIP-10 {
              color: rgb(229, 168, 75)
            }

            .icon-VIP-11 {
              color: rgb(102, 43, 31)
            }
          }

          .text {
            color: $font_main_color;
          }
        }

        .childCommon {
          line-height: 25px;
          padding-left: 10px;
          border-radius: 10px;
          margin-top: 10px;
          background-color: rgb(250, 250, 250);

          .childUser {
            color: rgb(80, 125, 175);
          }

          .childContent {
            color: $font_main_color;
          }
        }

        .timeAndMore {
          display: flex;
          justify-content: space-between;
          font-size: $font-size-xs;
          color: $font_second_color;
          margin-top: 10px;

          .mores {
            display: flex;
            justify-content: end;
            align-items: center;

            >p {
              padding: 0 10px;
              font-size: 14px;
              color: $font_second_color;

              &~p {
                border-left: 1px solid $lineColor;
              }

              &:hover {
                color: $font_main_color;
              }
            }

            .icon-kuaisuhuifu {
              font-size: 16px;
            }
          }
        }
      }

      &~li {
        border-top: 1px solid $lineColor;
      }
    }
  }

  .skeleton {
    padding: 0 30px;
    box-sizing: border-box;
  }
}
</style>
